<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../css/swiper.min.css"/>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/swiper.min.js"></script>
    <link rel="stylesheet" href="../css/index.css"/>
</head>
<body>

<!--第一层开始-->
<section class="f1">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../img/index1.jpg"/></div>
            <div class="swiper-slide"><img src="../img/index2.jpg"/></div>
            <div class="swiper-slide"><img src="../img/index3.jpg"/></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>


    </div>

</section>

<!--第二层开始-->
<section class="f2">
    <div class="safe">
        <div class="title">
            <p class="remai">热卖产品</p>
            <p class="hot">Hot</p>
        </div>

        <div>
            <!--分类-->
            <ul class="fenlei">
                <li data-id="all">全部</li>
                <li data-id="keting">客厅</li>
                <li data-id="bedroom">卧室</li>
                <li data-id="chufang">厨房</li>
                <li data-id="yushi">浴室</li>
            </ul>

            <!--内容-->
            <div id="all" class="page">

                <div class="safe">

                    <ul class="a">
                        <li>
                            <img src="../img/product1.jpg" />
                            <p>哑光黑极简书架</p>
                        </li>
                        <li>
                            <img src="../img/product2.jpg"/>
                            <p>设计师简约圆凳</p>
                        </li>
                        <li>
                            <img src="../img/product3.jpg"/>
                            <p>粉色贾克斯电灯</p>
                        </li>
                        <li>
                            <img src="../img/product4.jpg"/>
                            <p>裸色系列储物柜</p>
                        </li>
                    </ul>

                    <ul class="a">
                        <li>
                            <img src="../img/product5.jpg" />
                            <p>贾克斯复古灯泡</p>
                        </li>
                        <li>
                            <img src="../img/product6.jpg"/>
                            <p>墨绿色系列坐垫</p>
                        </li>
                        <li>
                            <img src="../img/product7.jpg"/>
                            <p>粉色靠枕</p>
                        </li>
                        <li>
                            <img src="../img/product8.jpg"/>
                            <p>欧式条纹储物格</p>
                        </li>
                    </ul>



                </div>
            </div>
            <div id="keting" class="page">

                <div class="safe">

                    <ul class="a">
                        <li>
                            <img src="../img/product4.jpg" />
                            <p>哑光黑极简书架</p>
                        </li>
                        <li>
                            <img src="../img/product7.jpg"/>
                            <p>设计师简约圆凳</p>
                        </li>
                        <li>
                            <img src="../img/product1.jpg"/>
                            <p>粉色贾克斯电灯</p>
                        </li>
                        <li>
                            <img src="../img/product3.jpg"/>
                            <p>裸色系列储物柜</p>
                        </li>
                    </ul>

                    <ul class="a">
                        <li>
                            <img src="../img/product8.jpg" />
                            <p>贾克斯复古灯泡</p>
                        </li>
                        <li>
                            <img src="../img/product4.jpg"/>
                            <p>墨绿色系列坐垫</p>
                        </li>
                        <li>
                            <img src="../img/product6.jpg"/>
                            <p>粉色靠枕</p>
                        </li>
                        <li>
                            <img src="../img/product1.jpg"/>
                            <p>欧式条纹储物格</p>
                        </li>
                    </ul>



                </div>
            </div>
            <div id="bedroom" class="page">

                <div class="safe">

                    <ul class="a">
                        <li>
                            <img src="../img/product4.jpg" />
                            <p>哑光黑极简书架</p>
                        </li>
                        <li>
                            <img src="../img/product8.jpg"/>
                            <p>设计师简约圆凳</p>
                        </li>
                        <li>
                            <img src="../img/product3.jpg"/>
                            <p>粉色贾克斯电灯</p>
                        </li>
                        <li>
                            <img src="../img/product5.jpg"/>
                            <p>裸色系列储物柜</p>
                        </li>
                    </ul>

                    <ul class="a">
                        <li>
                            <img src="../img/product7.jpg" />
                            <p>贾克斯复古灯泡</p>
                        </li>
                        <li>
                            <img src="../img/product1.jpg"/>
                            <p>墨绿色系列坐垫</p>
                        </li>
                        <li>
                            <img src="../img/product5.jpg"/>
                            <p>粉色靠枕</p>
                        </li>
                        <li>
                            <img src="../img/product1.jpg"/>
                            <p>欧式条纹储物格</p>
                        </li>
                    </ul>



                </div>
            </div>
            <div id="chufang" class="page">

                <div class="safe">

                    <ul class="a">
                        <li>
                            <img src="../img/product4.jpg" />
                            <p>哑光黑极简书架</p>
                        </li>
                        <li>
                            <img src="../img/product3.jpg"/>
                            <p>设计师简约圆凳</p>
                        </li>
                        <li>
                            <img src="../img/product2.jpg"/>
                            <p>粉色贾克斯电灯</p>
                        </li>
                        <li>
                            <img src="../img/product7.jpg"/>
                            <p>裸色系列储物柜</p>
                        </li>
                    </ul>

                    <ul class="a">
                        <li>
                            <img src="../img/product1.jpg" />
                            <p>贾克斯复古灯泡</p>
                        </li>
                        <li>
                            <img src="../img/product6.jpg"/>
                            <p>墨绿色系列坐垫</p>
                        </li>
                        <li>
                            <img src="../img/product7.jpg"/>
                            <p>粉色靠枕</p>
                        </li>
                        <li>
                            <img src="../img/product4.jpg"/>
                            <p>欧式条纹储物格</p>
                        </li>
                    </ul>



                </div>
            </div>
            <div id="yushi" class="page">

                <div class="safe">

                    <ul class="a">
                        <li>
                            <img src="../img/product7.jpg" />
                            <p>哑光黑极简书架</p>
                        </li>
                        <li>
                            <img src="../img/product4.jpg"/>
                            <p>设计师简约圆凳</p>
                        </li>
                        <li>
                            <img src="../img/product6.jpg"/>
                            <p>粉色贾克斯电灯</p>
                        </li>
                        <li>
                            <img src="../img/product8.jpg"/>
                            <p>裸色系列储物柜</p>
                        </li>
                    </ul>

                    <ul class="a">
                        <li>
                            <img src="../img/product4.jpg" />
                            <p>贾克斯复古灯泡</p>
                        </li>
                        <li>
                            <img src="../img/product3.jpg"/>
                            <p>墨绿色系列坐垫</p>
                        </li>
                        <li>
                            <img src="../img/product4.jpg"/>
                            <p>粉色靠枕</p>
                        </li>
                        <li>
                            <img src="../img/product1.jpg"/>
                            <p>欧式条纹储物格</p>
                        </li>
                    </ul>



                </div>
            </div>

        </div>


    </div>
</section>

<!--第三层开始-->
<section class="f3">

    <div class="safe">
        <div class="title">
            <p class="remai">系列产品</p>
            <p class="hot">Series</p>
        </div>

    </div>

    <div class="ge">
        <ul>
            <li class="q">
                <p class="aa">DLAKTIC 迪拉提</p>
                <p class="bb">尽情发挥创意，为创意、社交、放松、玩和爱打造独特的环境。迪拉提采用易装拆结构，可以随意组合，适应每天不同的氛围，选择好框架，就尽情发挥创意吧！</p>
            </li>
            <li class="w">
                <img src="../img/index4.jpg"/>
            </li>
        </ul>


        <ul>
            <li class="e">
                <p class="cc">STARANDMON 斯特梦</p>
                <p class="dd">尽情发挥创意，为创意、社交、放松、玩和爱打造独特的环境。迪拉提采用易装拆结构，可以随意组合，适应每天不同的氛围，选择好框架，就尽情发挥创意吧！</p>
            </li>
            <li class="r">
                <img src="../img/index5.jpg"/>
            </li>
        </ul>

        <ul>
            <li class="q">
                <p class="aa">DYLIC 迪力克</p>
                <p class="bb">尽情发挥创意，为创意、社交、放松、玩和爱打造独特的环境。迪拉提采用易装拆结构，可以随意组合，适应每天不同的氛围，选择好框架，就尽情发挥创意吧！</p>
            </li>
            <li class="w">
                <img src="../img/index6.jpg"/>
            </li>
        </ul>
    </div>

</section>

<!--第四层开始-->
<section class="f4">
<div class="safe">
    <div class="jieshao">
        <div class="title">
            <p class="remai">品牌介绍</p>
            <p class="hot">About</p>
        </div>

        <p class="aaa">
            十年间，我们为200多名国际与本地客户的300余个产品提供了易用的设计方案，有效提升的产品体验和客户品牌价值，并引领市场不断树立体验标杆。
        </p>
        <p class="bbb">
            我们整合商业思考、美学价值和技术实现，用设计的方法推动产品价值最大化，并与客户一起发现潜在机遇。
        </p>


    </div>
</div>
</section>

<!--第五层开始-->

<section class="f5">
    <div class="safe">
        <div class="title">
            <p class="remai">知名设计师</p>
            <p class="hot">Designer</p>
        </div>


        <ul class="ren">
            <li>
                <img src="../img/index_p1.jpg"/>
                <p class="name">雷蒙德·罗维/David</p>
                <p class="text">家用电器和日用品杂物设计品牌“+0”的创始人。他曾为多家知名公司如苹果、爱普生进行品牌设计，其作品在欧洲和美国赢得过...</p>
            </li>
            <li class="zhong">
                <img src="../img/index_p2.jpg" />
                <p class="name">小琴/Sunny</p>
                <p class="text">家用电器和日用品杂物设计品牌的创始人。他曾为多家知名公司如苹果、爱普生进行品牌设计.</p>
            </li>
            <li>
                <img src="../img/index_p3.jpg"/>
                <p class="name">英德·洛克/Loki</p>
                <p class="text">家用电器和日用品杂物设计品牌“+0”的创始人。</p>
            </li>
        </ul>


    </div>

</section>

<!--第六层开始-->
<section class="f6">
    <div class="safe">
        <img src="../img/about6.png"/>
    </div>

</section>

<!--页底开始-->
<footer>
    <p class="yedi">版权所有:深圳联合EL家具股份有限公司copyright©2012 粤ICP备21212121号</p>
</footer>


<!--浮窗导航开始-->

<nav>
    <div class="safe">

        <img src="../img/logo.png"/>

        <div class="daohang">
            <a href="../html/index.html"><span class="index">首页</span></a>
            <a href="../html/product.html"><span>产品</span></a>
            <a href="../html/line.html"><span>系列</span></a>
            <a href="../html/aboutme.html"><span>关于品牌</span></a>
            <a href="../html/contact.html"><span>联系我们</span></a>
        </div>


    </div>
</nav>





<script src="../js/index.js"></script>
</body>
</html>